<template>
    <!-- 列表商品组件 -->
    <div class="commodity_list">
        <div class="list_top">
            <div class="list_top_img">
                <van-image width="90" height="90" radius="2" :src="data?.productImages ? data?.productImages + '?x-oss-process=image/resize,w_300' : ''" />
                <img src="" alt="">
                <div class="list_top_img_tag" v-if="data?.hmMechanismsList[1]?.cooperationMode">多机制</div>
            </div>
            <div class="list_top_right">
                <div class="list_top_right_title">
                    <div class="title">{{ data?.styleName }}</div>
                    <div
                        :class="{ tag: true, tag_lan: data?.shelvesStatus == 1, tag_lv: data?.shelvesStatus == 2, tag_red: data?.shelvesStatus == 3 }">
                        {{ auditStatusNameById(data?.shelvesStatus)
                        }}</div>
                </div>
                <div class="list_top_right_introduce">{{ data?.sellingPoints }}</div>
                <div class="list_top_right_money">
                    <div class="money_left">
                        <span v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">￥ {{ data?.hmMechanismsList[0].price }}</span>
                        <span v-else>￥ {{ data?.hmMechanismsList[0].costPrice }}</span>
                        <span v-if="data?.hmMechanismsList[0].cooperationMode === '分佣'">佣 {{ data?.hmMechanismsList[0].commission }}%</span>
                    </div>
                    <div class="money_right">{{ data?.coreName }}</div>
                </div>
            </div>
        </div>
        <div class="list_text_cy">
            <div class="list_text_p_cy">
                <div class="list_text_p_left_cy">机制：</div>
                <div class="list_text_p_right_cy">{{ data?.hmMechanismsList[0].liveStreamingMechanism }}</div>
            </div>
            <div class="list_text_p_cys">
                <div class="list_text_p_left_cy">{{ names }}：</div>
                <div class="list_text_p_number_cy">{{ data?.stockAvailable }}件</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
defineProps({ data: { type: Object, default: () => { } },names:  { type: String, default: '' }})
// 商品状态反显
const auditStatusNameById = (shelvesStatus: string | number) => {
    switch (shelvesStatus) {
        case 1:
            return '已入库'
        case 2:
            return '已上架'
        case 3:
            return '已下架'
        case 4:
            return '待下架'
        default:
            break;
    }
}
</script>

<style lang="less" scoped>
@import url(@/views/productHome/productLists/components//style/index.less);
</style>